---
title: Demo
description: Demonstration of some of the theme components in action.
---

<PageDescription>


This page is meant to demonstrate some of the components in action. You can
check out the markdown used for this page
[on github](https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/example/src/pages/demo/index.mdx).

</PageDescription>


<AnchorLinks>
  <AnchorLink>Building bonds</AnchorLink>
  <AnchorLink>Global accessibility standards</AnchorLink>
  <AnchorLink>Small anchor links</AnchorLink>
  <AnchorLink>Videos</AnchorLink>
</AnchorLinks>

<Row>
<Column colMd={4} colLg={4} noGutterMdLeft>
<ArticleCard
  title="Getting started"
  href="/getting-started"
  actionIcon="arrowRight"
>


![Dark article layout mockup](/images/Article_06.png)

</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
<ArticleCard
  title="Theme configuration"
  href="/guides/configuration"
  actionIcon="arrowRight"
>


![Dark article layout mockup](/images/Article_06.png)

</ArticleCard>
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
<ArticleCard
  title="Contributions"
  href="/contributions"
  actionIcon="arrowRight"
>


![Dark article layout mockup](/images/Article_06.png)

</ArticleCard>
</Column>
</Row>


<PageDescription>


Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm.
Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen
halter furl. Swab barque interloper chantey doubloon starboard grog black jack
gangway rutters.

</PageDescription>


Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm.
Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen
halter furl. Swab barque interloper chantey doubloon starboard grog black jack
gangway rutters.

<Row>
<Column colMd={5} colLg={8}>


## Section heading

Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm.
Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen
halter furl. Swab barque interloper chantey doubloon starboard grog black jack
gangway rutters.

> Add-on repositories, or repos, are components built for a specific product or
> experience. The repos are built on top of the core Carbon repo, and enable

IBMers believe in progress—that application of intelligence, reason and science
can improve business, society and the human condition.

</Column>
<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1}>
<Aside>


<p>
  <strong>
    Good design is always
    <br />
    good design.
  </strong>
</p>

What we borrow from our own design history is not a mid-century aesthetic in
stylistic terms, but the modernist attitudes and approach used at the time.

</Aside>
</Column>
</Row>


## Small anchor links

Swab barque interloper™ chantey doubloon starboard grog black jack gangway
rutters π.

<AnchorLinks small>
  <AnchorLink>Header</AnchorLink>
  <AnchorLink>Header again</AnchorLink>
</AnchorLinks>

### Header

Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm.
Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen
halter furl. Swab barque interloper chantey doubloon starboard grog black jack
gangway rutters.

### Header again

Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm.
Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen
halter furl. Swab barque interloper chantey doubloon starboard grog black jack
gangway rutters.

1. This is a demonstration of an ordered list item. This list item is
   particularly long to demonstrate how the text wraps and aligns with the first
   line.
   1. This is a nested list item, it should wrap in the same way. Typically,
      nested list items should be of the same type (ordered, unordered) as their
      parent.
1. Ordered list item
1. Ordered list item

- This is a demonstration of an unordered list item. This list item is
  particularly long to demonstrate how the text wraps and aligns with the first
  line.
  - This is a nested list item, it should wrap in the same way. Typically,
    nested list items should be of the same type (ordered, unordered) as their
    parent.
- Unordered list item
- Unordered list item

## Images

![Large blocky illustration](../../images/large-image.jpg)

## Videos

<Video title="Eyes" vimeoId="310583077" />
